<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>进入/离开 & 列表过渡</title>
    <script src="../vue.js"></script>
    <style type="text/css">
      /* --------------------------- */
      .fade-enter-active, .fade-leave-active {
        transition: opacity .5s;
      }
      .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
        opacity: 0;
      }
      /* --------------------------- */
      /* 可以设置不同的进入和离开动画 */
      /* 设置持续时间和动画函数 */
      .slide-fade-enter-active {
        transition: all .3s ease;
      }
      .slide-fade-leave-active {
        transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
      }
      .slide-fade-enter, .slide-fade-leave-to
      /* .slide-fade-leave-active for below version 2.1.8 */ {
        transform: translateX(10px);
        opacity: 0;
      }
      /* --------------------------- */
      .bounce-enter-active {
        animation: bounce-in .5s;
      }
      .bounce-leave-active {
        animation: bounce-in .5s reverse;
      }
      @keyframes bounce-in {
        0% {
          transform: scale(0);
        }
        50% {
          transform: scale(1.5);
        }
        100% {
          transform: scale(1);
        }
      }
      /* --------------------------- */
      .component-fade-enter-active, .component-fade-leave-active {
        transition: opacity .3s ease;
      }
      .component-fade-enter, .component-fade-leave-to
      /* .component-fade-leave-active for below version 2.1.8 */ {
        opacity: 0;
      }
      /* --------------------------- */
      .list-item {
        display: inline-block;
        margin-right: 10px;
      }
      .list-enter-active, .list-leave-active {
        transition: all 1s;
      }
      .list-enter, .list-leave-to
      /* .list-leave-active for below version 2.1.8 */ {
        opacity: 0;
        transform: translateY(30px);
      }
      /* --------------------------- */
      .flip-list-move {
        transition: transform 1s;
      }
      /* --------------------------- */
      .list-complete-item {
        transition: all 1s;
        /* 需要注意的是使用 FLIP 过渡的元素不能设置为 display: inline 。作为替代方案，可以设置为 display: inline-block 或者放置于 flex 中 */
        display: inline-block;
        margin-right: 10px;
      }
      .list-complete-enter, .list-complete-leave-to
      /* .list-complete-leave-active for below version 2.1.8 */ {
        opacity: 0;
        transform: translateY(30px);
      }
      .list-complete-leave-active {
        position: absolute;
      }
      /* --------------------------- */
      /* --------------------------- */
      /* --------------------------- */
    </style>

  </head>
  <body>
    <!-- 1 概述 -->
    <!-- 2 单元素/组件的过渡 -->
    <div id="app1" style="border: 1px dashed blue;margin-bottom: 2px;">
      <button v-on:click="show = !show">Toggle</button>
      <transition name="fade">
        <p v-if="show">hello</p>
      </transition>
    </div>
    <!-- 2.1 过渡的类名 -->
    <!-- 2.2 CSS 过渡 -->
    <div id="app2" style="border: 1px dashed red;margin-bottom: 2px;">
      <button v-on:click="show = !show">Toggle</button>
      <transition name="slide-fade">
        <p v-if="show">hello</p>
      </transition>
    </div>
    <!-- 2.3 CSS 动画 -->
    <div id="app3" style="border: 1px dashed blue;margin-bottom: 2px;">
      <button @click="show = !show">Toggle show</button>
      <transition name="bounce">
        <p v-if="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.</p>
      </transition>
    </div>
    <!-- 2.4 自定义过渡的类名 -->
    <!-- 
    我们可以通过以下 attribute 来自定义过渡类名：
    enter-class
    enter-active-class
    enter-to-class (2.1.8+)
    leave-class
    leave-active-class
    leave-to-class (2.1.8+)
    他们的优先级高于普通的类名，这对于 Vue 的过渡系统和其他第三方 CSS 动画库，如 Animate.css 结合使用十分有用。
     -->
    <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
    <div id="app4" style="border: 1px dashed red;margin-bottom: 2px;">
      <button @click="show = !show">
        Toggle render
      </button>
      <transition
        name="custom-classes-transition"
        enter-active-class="animated tada"
        leave-active-class="animated bounceOutRight"
      >
        <p v-if="show">hello</p>
      </transition>
    </div>
    <!-- 2.5 同时使用过渡和动画 -->
    <!-- 2.6 显性的过渡持续时间 -->
    <!-- 
    在很多情况下，Vue 可以自动得出过渡效果的完成时机。默认情况下，Vue 会等待其在过渡效果的根元素的第一个 transitionend 或 animationend 事件。然而也可以不这样设定——比如，我们可以拥有一个精心编排的一系列过渡效果，其中一些嵌套的内部元素相比于过渡效果的根元素有延迟的或更长的过渡效果。
    在这种情况下你可以用 <transition> 组件上的 duration prop 定制一个显性的过渡持续时间 (以毫秒计)：
    <transition :duration="1000">...</transition>
    你也可以定制进入和移出的持续时间：
    <transition :duration="{enter: 500, leave: 800}">...</transition>
     -->
    
    <!-- 2.7 JavaScript 钩子 -->
    <!-- 
    可以在 attribute 中声明 JavaScript 钩子
    <transition
      v-on:before-enter="beforeEnter"
      v-on:enter="enter"
      v-on:after-enter="afterEnter"
      v-on:enter-cancelled="enterCancelled"
    
      v-on:before-leave="beforeLeave"
      v-on:leave="leave"
      v-on:after-leave="afterLeave"
      v-on:leave-cancelled="leaveCancelled"
    >
       ... 
    </transition>
    
    // ...
    methods: {
      // --------
      // 进入中
      // --------
    
      beforeEnter: function (el) {
        // ...
      },
      // 当与 CSS 结合使用时
      // 回调函数 done 是可选的
      enter: function (el, done) {
        // ...
        done()
      },
      afterEnter: function (el) {
        // ...
      },
      enterCancelled: function (el) {
        // ...
      },
    
      // --------
      // 离开时
      // --------
    
      beforeLeave: function (el) {
        // ...
      },
      // 当与 CSS 结合使用时
      // 回调函数 done 是可选的
      leave: function (el, done) {
        // ...
        done()
      },
      afterLeave: function (el) {
        // ...
      },
      // leaveCancelled 只用于 v-show 中
      leaveCancelled: function (el) {
        // ...
      }
    }
    
    -->
    
    <!-- 一个使用 Velocity.js 的简单例子：
    Velocity 和 jQuery.animate 的工作方式类似，也是用来实现 JavaScript 动画的一个很棒的选择 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
    <div id="app5" style="border: 1px dashed blue;margin-bottom: 2px;">
      <button @click="show = !show">Toggle</button>
      <transition
        v-on:before-enter="beforeEnter"
        v-on:enter="enter"
        v-on:leave="leave"
        v-bind:css="false"
      >
        <p v-if="show">Demo</p>
      </transition>
    </div>
    <!-- 3 初始渲染的过渡 -->
    <div id="app6" style="border: 1px dashed red;margin-bottom: 2px;">
      <button @click="show = !show">Toggle</button>
      <!-- 自定义 CSS 类名，自定义 JavaScript 钩子 -->
      <transition 
        appear
        appear-class="custom-appear-class"
        appear-to-class="custom-appear-to-class"
        appear-active-class="custom-appear-active-class"
        v-on:before-appear="customBeforeAppearHook"
        v-on:appear="customAppearHook"
        v-on:after-appear="customAfterAppearHook"
        v-on:appear-canceled="customAppearCanceledHook"
      >
        <p v-if="show">Demo</p>
      </transition>
    </div>
    <!-- 4 多个元素的过渡 -->
    <div id="app7" style="border: 1px dashed red;margin-bottom: 2px;">
      <transition>
        <table v-if="items.length > 0">
          <tr v-for="item in items" :key="item.id">
            <td>{{item.id}}: </td>
            <td>{{item.content}}</td>
          </tr>
        </table>
        <p v-else>Sorry, no item found.</p>
      </transition>
    </div>
    <!-- 注：当有相同标签名的元素切换时，需要通过 key attribute 设置唯一的值来标记以让 Vue 区分它们，
      否则 Vue 为了效率只会替换相同标签内部的内容。即使在技术上没有必要，
      给在 <transition> 组件中的多个元素设置 key 是一个更好的实践。 -->
    <div id="app8" style="border: 1px dashed blue;margin-bottom: 2px;">
      <transition>
        <button v-if="isEditing" key="save">Save</button>
        <button v-else key="edit">Edit</button>
      </transition>
    </div>
    <!-- 在一些场景中，也可以通过给同一个元素的 key attribute 设置不同的状态来代替 v-if 和 v-else，上面的例子可以重写为： -->
    <div id="app9" style="border: 1px dashed red;margin-bottom: 2px;">
      <transition>
        <button :key="isEditing">{{isEditing ? 'Save' : 'Edit'}}</button>
      </transition>
    </div>
    <!-- 使用多个 v-if 的多个元素的过渡可以重写为绑定了动态 property 的单个元素过渡。例如： -->
    <div id="app10" style="border: 1px dashed blue;margin-bottom: 2px;">
      <transition>
        <button v-if="docState === 'saved'" key="saved">Edit</button>
        <button v-if="docState === 'edited'" key="edited">Save</button>
        <button v-if="docState === 'editing'" key="editing">Cancel</button>
      </transition>
    </div>
    <!-- 可以重写为： -->
    <div id="app11" style="border: 1px dashed red;margin-bottom: 2px;">
      <transition>
        <button v-bind:key="docState">{{buttonMessage}}</button>
      </transition>
    </div>
    <!-- 4.1 过渡模式 -->
    <div id="app12" style="border: 1px dashed blue;margin-bottom: 2px;">
      <!-- 
        在“on”按钮和“off”按钮的过渡中，两个按钮都被重绘了，一个离开过渡的时候另一个开始进入过渡。
        这是 <transition> 的默认行为 - 进入和离开同时发生：
          <transition name="fade">
        然后，我们加上 translate 让它们运动像滑动过渡：
          in-out：新元素先进行过渡，完成之后当前元素过渡离开。
          out-in：当前元素先进行过渡，完成之后新元素过渡进入。
      -->
      <!-- <transition name="slide-fade" mode="in-out"> -->
      <transition name="slide-fade" mode="out-in">
        <button v-if="show" @click="show = !show" key="on">on</button>
        <button v-else @click="show = !show" key="off">off</button>
      </transition>
    </div>
    <!-- 5 多个组件的过渡 -->
    <div id="app13" style="border: 1px dashed red;margin-bottom: 2px;">
      <!-- 
        多个组件的过渡简单很多 - 我们不需要使用 key attribute。相反，我们只需要使用动态组件：
      -->
      <input type="radio" id="v-a" value="v-a" v-model="view"/>
      <label for="v-a">A</label>
      <input type="radio" id="v-b" value="v-b" v-model="view"/>
      <label for="v-b">B</label>
      <transition name="component-fade" mode="out-in">
        <component v-bind:is="view"></component>
      </transition>
    </div>
    <!-- 6 列表过渡 -->
    <!-- 6.1 列表的进入/离开过渡 -->
    <div id="app14" style="border: 1px dashed red;margin-bottom: 2px;" class="demo">
      <button @click="add">Add</button>
      <button @click="remove">Remove</button>
      <transition-group name="list" tag="p">
        <span v-for="item in items" :key="item" class="list-item">
          {{item}}
        </span>
      </transition-group>
    </div>
    <!-- 6.2 列表的排序过渡 -->
    <!-- <transition-group> 组件还有一个特殊之处。不仅可以进入和离开动画，还可以改变定位。
      要使用这个新功能只需了解新增的 v-move class，它会在元素的改变定位的过程中应用。像之前的类名一样，
      可以通过 name attribute 来自定义前缀，也可以通过 move-class attribute 手动设置。
        v-move 对于设置过渡的切换时机和过渡曲线非常有用，你会看到如下的例子： -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>
    <div id="app15" style="border: 1px dashed blue;margin-bottom: 2px;" class="demo">
      <button @click="shuffle">Shuffle</button>
      <transition-group name="flip-list" tag="ul">
        <li v-for="item in items" :key="item">{{item}}</li>
      </transition-group>
    </div>
    
    <!-- 这个看起来很神奇，内部的实现，Vue 使用了一个叫 FLIP 简单的动画队列
    使用 transforms 将元素从之前的位置平滑过渡新的位置。
    我们将之前实现的例子和这个技术结合，使我们列表的一切变动都会有动画过渡 -->
    <div id="app16" style="border: 1px dashed red;margin-bottom: 2px;" class="demo">
      <button @click="shuffle">Shuffle</button>
      <button @click="add">Add</button>
      <button @click="remove">Remove</button>
      <transition-group name="list-complete" tag="p">
        <span v-for="item in items" :key="item" class="list-complete-item">{{item}}</span>
      </transition-group>
    </div>
    <!-- 6.3 列表的交错过渡 -->
    <!-- 通过 data attribute 与 JavaScript 通信，就可以实现列表的交错过渡： -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
    <div id="app17" style="border: 1px dashed blue;margin-bottom: 2px;" class="demo">
      <input v-model="query" />
      <transition-group
        name="staggered-fade"
        tag="ul"
        :css="false"
        @before-enter="beforeEnter"
        @enter="enter"
        @leave="leave"
      >
        <li v-for="(item, index) in computedList" :key="item.msg" :data-index="index">
          {{item.msg}}
        </li>
      </transition-group>
    </div>
    <!-- 7 可复用的过渡 -->
    <!-- 过渡可以通过 Vue 的组件系统实现复用。要创建一个可复用过渡组件，
    你需要做的就是将 <transition> 或者 <transition-group> 作为根组件，然后将任何子组件放置在其中就可以了。
    使用 template 的简单例子： -->
    
    <!-- 8 动态过渡 -->
    <!-- 在 Vue 中即使是过渡也是数据驱动的！动态过渡最基本的例子是通过 name attribute 来绑定动态值。 -->
    <div id="app18" style="border: 1px dashed red;margin-bottom: 2px;" class="demo">
      <transition :name="transitionName">
        <!-- ... -->
      </transition>
    </div>
    <!-- 当你想用 Vue 的过渡系统来定义的 CSS 过渡/动画在不同过渡间切换会非常有用。
      所有过渡 attribute 都可以动态绑定，但我们不仅仅只有 attribute 可以利用，
      还可以通过事件钩子获取上下文中的所有数据，因为事件钩子都是方法。这意味着，
      根据组件的状态不同，你的 JavaScript 过渡会有不同的表现。
    -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
    <div id="app19" style="border: 1px dashed blue;margin-bottom: 2px;" class="demo">
      Fade In: <input type="range" v-model="fadeInDuration" min="0" :max="maxFadeDuration" />
      Fade Out: <input type="range" v-model="fadeOutDuration" min="0" :max="maxFadeDuration" />
      <transition 
        :css="false"
        @before-enter="beforeEnter"
        @enter="enter"
        @leave="leave"
      >
        <p v-if="show">Hello</p>
      </transition>
      <button v-if="stop"
        @click="stop = false; show = false"
      >Start animating</button>
      <button v-else
        @click="stop = true"
      >Stop it!</button>
    </div>
    
    <script type="text/javascript">
      // 1 概述
      // 2 单元素/组件的过渡
      new Vue({
        el: '#app1',
        data:{
          show: true
        }
      })
      // 2.1 过渡的类名
      // 2.2 CSS 过渡
      new Vue({
        el: '#app2',
        data:{
          show: true
        }
      })
      // 2.3 CSS 动画
      new Vue({
        el: '#app3',
        data: {show: true}
      })
      // 2.4 自定义过渡的类名
      new Vue({
        el: '#app4',
        data: {show: true}
      })
      // 2.5 同时使用过渡和动画
      // 2.6 显性的过渡持续时间
      // 2.7 JavaScript 钩子
      new Vue({
        el: '#app5',
        data: {show: false},
        methods: {
          beforeEnter: function(el) {
            el.style.opacity = 0
            el.style.transformOrigin = 'left'
          },
          enter: function(el, done) {
            Velocity(el, {opacity: 1, fontSize: '1.4em'}, {duration: 300})
            Velocity(el, {fontSize: '1em'}, {complete: done})
          },
          leave: function(el, done) {
            Velocity(el, {translateX: '15px', rotateZ: '50deg'}, {duration: 600})
            Velocity(el, {rotateZ: '100deg'}, {loop: 2})
            Velocity(el, {
              rotateZ: '45deg',
              translateX: '30px',
              translateY: '30px',
              opacity: 0
            }, {complete: done})
          }
        }
      })
      // 3 初始渲染的过渡
      new Vue({
        el: '#app6',
        data: {show: false},
        methods: {
          customBeforeAppearHook: function() {
            
          },
          customAppearHook: function() {
            
          },
          customAfterAppearHook: function() {
            
          },
          customAfterAppearHook: function() {
            
          },
          customAppearCanceledHook: function() {
            
          }
        }
      })
      // 4 多个元素的过渡
      new Vue({
        el: '#app7',
        data: {
          items: [
            {id: 1, content: 'item1'},
            {id: 2, content: 'item2'},
            {id: 3, content: 'item3'}
          ]
        }
      })
      
      new Vue({
        el: '#app8',
        data: {
          isEditing: true
        }
      })
      
      new Vue({
        el: '#app9',
        data: {
          isEditing: false
        }
      })
      
      new Vue({
        el: '#app10',
        data: {
          docState: 'editing'
        }
      })
      
      new Vue({
        el: '#app11',
        data: {
          docState: 'saved'
        },
        computed: {
          buttonMessage: function() {
            switch(this.docState) {
              case 'saved':
                return 'Edit'
                // break;
              case 'edited':
                return 'Save'
                // break;
              case 'editing':
                return 'Cancel'
                // break;
              default:
                return 'Default'
                // break;
            }
          }
        }
      })
      
      // 4.1 过渡模式
      new Vue({
        el: '#app12',
        data: {show: false}
      })
      // 5 多个组件的过渡
      new Vue({
        el: '#app13',
        data: {
          view: 'v-a'
        },
        components: {
          'v-a': {
            template: '<div>Component A</div>'
          },
          'v-b': {
            template: '<div>Component B</div>'
          }
        }
      })
      // 6 列表过渡
      // 6.1 列表的进入/离开过渡
      var vm14 = new Vue({
        el: '#app14',
        data: {
          items: [1,2,3,4,5,6,7,8,9],
          nextNum: 10
        },
        methods: {
          randomIndex: function() {
            return Math.floor(Math.random() * this.items.length)
          },
          add: function() {
            this.items.splice(this.randomIndex(), 0, this.nextNum++)
          },
          remove: function() {
            this.items.splice(this.randomIndex(), 1)
          }
        }
      })
      // 6.2 列表的排序过渡
      var vm15 = new Vue({
        el: '#app15',
        data: {
          items: [1,2,3,4,5,6,7,8,9],
          nextNum: 10
        },
        methods: {
          shuffle: function() {
            this.items = _.shuffle(this.items)
          }
        }
      })
      
      var vm16 = new Vue({
        el: '#app16',
        data: {
          items: [1,2,3,4,5,6,7,8,9],
          nextNum: 10
        },
        methods: {
          randomIndex: function() {
            return Math.floor(Math.random() * this.items.length)
          },
          add: function() {
            this.items.splice(this.randomIndex(), 0, this.nextNum++)
          },
          remove: function() {
            this.items.splice(this.randomIndex(), 1)
          },
          shuffle: function() {
            this.items = _.shuffle(this.items)
          }
        }
      })
      // 6.3 列表的交错过渡
      new Vue({
        el: '#app17',
        data: {
          query: '',
          list: [
            { msg: 'Bruce Lee' },
            { msg: 'Jackie Chan' },
            { msg: 'Chuck Norris' },
            { msg: 'Jet Li' },
            { msg: 'Kung Fury' }
          ]
        },
        computed: {
          computedList: function() {
            var vm = this
            return this.list.filter(function (item) {
              return item.msg.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1
            })
          }
        },
        methods: {
          beforeEnter: function(el) {
            el.style.opacity = 0
            el.style.height = 0
          },
          enter: function(el, done) {
            var delay = el.dataset.index * 150
            setTimeout(function() {
              Velocity(
                el, 
                {opacity: 1, height: '1.6em'},
                {complete: done}
              )
            }, delay)
          },
          leave: function(el, done) {
            var delay = el.dataset.index * 150
            setTimeout(function() {
              Velocity(
                el, 
                {opacity: 0, height: 0},
                {complete: done}
              )
            }, delay)
          }
        }
      })
      
      // 7 可复用的过渡
      /* 过渡可以通过 Vue 的组件系统实现复用。要创建一个可复用过渡组件，
      你需要做的就是将 <transition> 或者 <transition-group> 作为根组件，然后将任何子组件放置在其中就可以了。
      使用 template 的简单例子： */
      Vue.component('my-special-transition', {
        template: '\
          <transition\
            name="very-special-transition"\
            mode="out-in"\
            v-on:before-enter="beforeEnter"\
            v-on:after-enter="afterEnter"\
          >\
            <slot></slot>\
          </transition>\
        ',
        methods: {
          beforeEnter: function(el) {
            // ...
          },
          afterEnter: function(el) {
            // ...
          }
        }
      })
      
      // 函数式组件更适合完成这个任务：
      Vue.component('my-special-transition2', {
        functional: true,
        render: function(createElement, context) {
          var data = {
            props: {
              name: 'very-special-transition',
              mode: 'out-in'
            },
            on: {
              beforeEnter: function(el) {
                // ...
              },
              afterEnter: function(el) {
                // ...
              }
            }
          }
          return createElement('transition', data, context.children)
        }
      })
      
      // 8 动态过渡
      new Vue({
        el: '#app19',
        data: {
          show: true,
          fadeInDuration: 1000,
          fadeOutDuration: 1000,
          maxFadeDuration: 1500,
          stop: true
        },
        mounted: function() {
          this.show = false
        },
        methods: {
          beforeEnter: function(el) {
            el.style.opacity = 0
          },
          enter: function(el, done) {
            var vm = this
            Velocity(el, 
              {opacity: 1},
              {
                duration: this.fadeInDuration,
                complete: function() {
                  done()
                  if (!vm.stop) vm.show = false
                }
              }
            )
          },
          leave: function(el, done) {
            var vm = this
            Velocity(el, 
              {opacity: 0},
              {
                duration: this.fadeOutDuration,
                complete: function() {
                  done()
                  vm.show = true
                }
              }
            )
          }
        }
      })
      
      // 最后，创建动态过渡的最终方案是组件通过接受 props 来动态修改之前的过渡。一句老话，唯一的限制是你的想象力。
    </script>
  </body>
</html>
